<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  </head>
  <body>
    <button>get</button>
    <button>post</button>
    <button>ajax</button>
    <script>
      var btns = document.querySelectorAll('button')
      btns[0].onclick = function () {
        axios
          //参数一：地址 参数二：其他参数
          .get('http://127.0.0.1:8080/axios', {
            // url参数
            params: {
              asd: 300,
              dsa: 003
            },
            // 请求头
            headers: {
              name: 'sss',
              age: 20
            }
          })
          .then((res) => {
            console.log(res)
          })
      }
      btns[1].onclick = function () {
        axios
          // 参数一：地址 参数二：请求体(post请求才有) 参数三：其他参数
          .post(
            'http://127.0.0.1:8080/axios',
            {
              username: 'admin',
              password: 123456
            },
            {
              // url参数
              params: {
                asd: 300,
                dsa: 003
              },
              // 请求头
              headers: {
                name: 'sss',
                age: 20
              }
            }
          )
          .then((res) => {
            console.log(res)
          })
      }

      btns[2].onclick = function () {
        axios({
          method: 'post',
          url: 'http://127.0.0.1:8080/axios',
          params: {
            name: 'sa',
            age: 30
          },
          // 请求体
          data: {
            width: 200,
            height: 200
          },
          headers: {
            a: 200,
            b: 300
          }
        }).then((res) => {
          console.log(res)
        })
      }
    </script>
  </body>
</html>
